<template>
  <div class="dashboard" v-loading="loading">
    <!-- 顶 -->
    <div class="statistics">
      <!-- 指标统计 -->
      <div class="statistics-left">
        <!-- 标题 -->
        <div class="left-title">
          <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
          <span>指标统计</span>
        </div>
        <!-- 盒子内容 -->
        <div class="left-content">
          <div class="content">
            <div class="content-Box" @click="onGotoLists(1)">
              <div class="content-img"><img alt="" src="@/assets/dashboard/未完成任务@3x.png"><span>未完成事件</span>
              </div>
              <h3>{{statistical.event.un_complete||0}}</h3>
              <p>处理中事件 {{statistical.event.process||0}}</p>
            </div>
          </div>
          <div class="content">
            <div class="content-Box" @click="onGotoLists(2)">
              <div class="content-img"><img alt="" src="@/assets/dashboard/事件完成.png"><span>今日完成事件</span>
              </div>
              <h3>{{statistical.event.today_complete||0}}</h3>
              <p>昨日完成事件 {{statistical.event.yesterday_complete||0}}</p>
            </div>
          </div>
          <div class="content" style="cursor: unset">
            <div class="content-Box" >
              <div class="content-img">
                <img alt="" src="@/assets/dashboard/客户@3x.png"><span>事件本月服务客户</span></div>
              <h3>{{statistical.event.month_service_count||0}}</h3>
              <p>较上月 <span :class="{fall:+statistical.event.percent<0,rose:+statistical.event.percent>0}"><span></span>{{Math.abs(statistical.event.percent||0).toFixed(2)}}%</span></p>
            </div>
          </div>
          <div class="content">
            <div class="content-Box" @click="onGotoLists(4)">
              <div class="content-img"><img alt="" src="@/assets/dashboard/工单@3x.png"><span>未完成工单</span>
              </div>
              <h3>{{statistical.work_order.un_complete||0}}</h3>
              <p>进行中工单 {{statistical.work_order.process||0}}</p>
            </div>
          </div>
          <div class="content">
            <div class="content-Box" @click="onGotoLists(5)">
              <div class="content-img"><img alt="" src="@/assets/dashboard/异常@3x.png"><span>异常工单</span>
              </div>
              <h3 style="color: red">{{statistical.work_order.exception||0}}</h3>
            </div>
          </div>
          <div class="content"  style="cursor: unset">
            <div class="content-Box" >
              <div class="content-img" >
                <img alt="" src="@/assets/dashboard/客户 (1)@3x.png"><span>工单本月服务客户</span></div>
              <h3>{{statistical.work_order.month_service_count||0}}</h3>
              <p>较上月 <span :class="{fall:+statistical.work_order.percent<0,rose:+statistical.work_order.percent>0}"><span></span>{{Math.abs(statistical.work_order.percent||0).toFixed(2)}}%</span></p>
            </div>
          </div>
        </div>
      </div>
      <!-- 待办事项 -->
      <div class="statistics-right">
        <!-- 标题 -->
        <div class="right-title">
          <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
          <span>待办事项</span>

          <el-dropdown @command="onChangeTodo">
          <span class="el-dropdown-link">
              {{todoTypeLabels[todoType]}}<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="all">全部</el-dropdown-item>
              <el-dropdown-item command="creator">我创建的</el-dropdown-item>
              <el-dropdown-item command="assist">我协同的</el-dropdown-item>
              <el-dropdown-item command="master">我负责的</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!-- 盒子内容 -->
        <div class="right-content">
          <div class="right-content-box" @click="onGotoLists(7)">
            <h2>{{todoData.process_event_count||0}}</h2>
            <p>处理中事件</p>
          </div>
          <div class="right-content-box" @click="onGotoLists(8)">
            <h2>{{todoData.un_callback_work_order_count||0}}</h2>
            <p>待回访工单</p>
          </div>
          <div class="right-content-box" @click="onGotoLists(9)">
            <h2>{{todoData.process_work_order_count||0}}</h2>
            <p>进行中工单</p>
          </div>
          <div class="right-content-box" @click="onGotoLists(10)">
            <h2>{{todoData.bom_count||0}}</h2>
            <p>待办理备件</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 顶下 -->
    <div class="Chart">
      <div class="Chart-left">
        <!-- 客户满意度构成 -->
        <div class="left-content">
          <div class="content-title">
            <div>
              <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
              <span>客户满意度构成</span>
            </div>
            <div class="title-text">
              <p @click="openSelectDate(1)">选择时间<i class="el-icon-arrow-down el-icon--right"></i></p>
              <span @click="onGotoDetails(1)">详情数据</span>
            </div>
          </div>
          <div style="overflow:auto;">
            <echarts1 :data="echarts1Data"/>
          </div>
        </div>
        <!-- 客户满意度好评率 -->
        <div class="right-content">
          <div class="content-title">
            <div>
              <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
              <span>客户满意度好评率</span>
            </div>
            <div class="title-text">
              <p @click="openSelectDate(2)">选择时间<i class="el-icon-arrow-down el-icon--right"></i></p>
              <span @click="onGotoDetails(2)">详情数据</span>
            </div>
          </div>
          <div style="overflow:auto;">
            <echarts2 :data="echarts2Data" />
          </div>
        </div>
      </div>
      <div class="left-content">
        <div class="content-title">
          <div>
            <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
            <span>平均服务用时</span>
          </div>
          <div class="title-text">
            <p @click="openSelectDate(5)">选择时间<i class="el-icon-arrow-down el-icon--right"></i></p>
            <span @click="onGotoDetails(5)">详情数据</span>
          </div>
        </div>
        <div style="overflow:auto;">
          <echarts5 :data="echarts5Data"/>
        </div>
      </div>
    </div>
    <!-- 底上 -->
    <div class="Linediagram">
      <div class="Linediagram-left">
        <!-- 客户满意度构成 -->
        <div class="content-title">
          <div>
            <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
            <span>及时关单率</span>
          </div>
          <div class="title-text">
            <p @click="openSelectDate(3)">选择时间<i class="el-icon-arrow-down el-icon--right"></i></p>
            <span @click="onGotoDetails(3)">详情数据</span>
          </div>
        </div>
        <div style="overflow:auto;">
          <echarts3 :data="echarts3Data"/>
        </div>
      </div>

      <div class="Linediagram-right">
        <div class="content-title">
          <div>
            <img alt="" src="../../assets/dashboard/圆角矩形 5.png">
            <span>服务人效</span>
          </div>
          <div class="title-text">
            <p @click="openSelectDate(6)">选择时间<i class="el-icon-arrow-down el-icon--right"></i></p>
            <span @click="onGotoDetails(6)">详情数据</span>
          </div>
        </div>
        <div style="overflow:auto;">
          <echarts6 :data="echarts6Data"/>
        </div>
      </div>
    </div>
    <DateDialog @selectDate="onSelectDate" ref="dateDialogRef"></DateDialog>
  </div>
</template>

<script>
import echarts1 from "./components/echarts1.vue"
import echarts2 from "./components/echarts2.vue"
import echarts3 from "./components/echarts3.vue"
// import echarts4 from "./components/echarts4.vue"
import echarts5 from "./components/echarts5.vue"
import echarts6 from "./components/echarts6.vue"
// import echarts7 from "./components/echarts7.vue"
import DateDialog from "./components/DateDialog.vue"

export default {
  data() {
    return {
      //控制页面加载
      loading:true,
      echarts1Data:[], //客户满意度构成
      echarts2Data:[], //客户满意度好评率
      echarts3Data:[], //客户满意度构成
      echarts5Data:[], //及时关单率
      echarts6Data:[], //服务人效
      todoTypeLabels:{all:"全部",creator:"我创建的",assist:"我协同的",master:"我负责的"},
      todoType:"all",
      todoData:{},
      statistical:{event:{},'work_order':{}}, //指标统计
    }
  },
  mounted() {
    this.getDashboard()
  },

  methods:{
    //打开日期选择弹窗
    openSelectDate(origin){
      this.$refs.dateDialogRef.open(origin)
    },
    //选择日期
    onSelectDate({date,dateType,origin}){
      switch (origin){
        case 1:
          this.getSatisfactionForm(dateType==="month_select"?date:null,dateType)
          break
        case 2:
          this.getSatisfactionRate(dateType==="month_select"?date:null,dateType)
          break
        case 3:
          this.getCloseProbability(dateType==="month_select"?date:null,dateType)
          break
        case 5:
          this.getAvgServiceTime(dateType==="month_select"?date:null,dateType)
          break
        case 6:
          this.getPerson_efficiency(dateType==="month_select"?date:null,dateType)
          break
      }
    },
    onChangeTodo(todoType){
      this.todoType = todoType
      this.getTodo()
    },
    //跳转至报表详情页
    onGotoDetails(origin){
      let url
      switch (origin){
        case 1:
          url="/reports/workorder-monitoring/customer-satisfaction"
          break
        case 2:
          url="/reports/workorder-monitoring/customer-satisfaction"
          break
        case 3:
          url="/reports/workorder-monitoring/close-rate"
          break
        case 5:
          url="/reports/workorder-monitoring/workorder-trend"
          break
        case 6:
          url="/reports/workorder-monitoring/workorder-aging"
          break
        default:
          return false
      }
      this.$router.push(url)
    },
    //跳转至列表页
    onGotoLists(origin){
      let url
      switch (origin){
        case 1:
          url="/event/event"
          localStorage.setItem('event_status', '未完成')
          break
        case 2:
          url="/event/event"
          localStorage.setItem('event_status', '今日完成')
          break
        case 3:
          url="/event/event"
          break
        case 4:
          url="/workTickets/workTickets"
          localStorage.setItem('wo_status', 'un_complete')
          break
        case 5:
          url="/workTickets/workTickets"
          localStorage.setItem('wo_status', 'exception')
          break
        case 6:
          url="/workTickets/workTickets"
          break
        case 7:
          url="/event/event"
          localStorage.setItem('event_status', '处理中')
          break
        case 8:
          url="/workTickets/returnWork"
          break
        case 9:
          url="/workTickets/workTickets"
          localStorage.setItem('wo_status', 'processing')
          break
        case 10:
          url="/bom/stock"
          break
        default:
          return false
      }
      this.$router.push(url)
    },


    //获取首屏信息
    getDashboard(){
      this.$http.get("dashboard").then((res)=>{
        if(res.data.code === 0){
          this.statistical = res.data.data.target
          this.echarts5Data = res.data.data['avg_service_time'].data
          this.echarts3Data = res.data.data['close_probability']
          this.echarts6Data = res.data.data['person_efficiency']
          this.echarts1Data = res.data.data['satisfaction_form'].data
          this.echarts2Data = res.data.data['satisfaction_probability']
          this.todoData = res.data.data['todo'].data
        }
        this.loading=false
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //客户满意度构成
    getSatisfactionForm(date,dateType){
      this.$http.get("dashboard/satisfaction_form",{params:{type:dateType,month_start:date?.[0],month_end:date?.[1]}}).then((res)=>{
        if(res.data.code === 0){
          this.echarts1Data = res.data.data.data
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //客户满意度好评率
    getSatisfactionRate(date,dateType){
      this.$http.get("dashboard/satisfaction_probability",{params:{type:dateType,month_start:date?.[0],month_end:date?.[1]}}).then((res)=>{
        if(res.data.code === 0){
          this.echarts2Data = res.data.data
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //待办事项
    getTodo(){
      this.$http.get("dashboard/todo",{params:{type:this.todoType}}).then((res)=>{
        if(res.data.code === 0){
          this.todoData = res.data.data.data
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //平均服务用时
    getAvgServiceTime(date,dateType){
      this.$http.get("dashboard/avg_service_time",{params:{type:dateType,month_start:date?.[0],month_end:date?.[1]}}).then((res)=>{
        if(res.data.code === 0){
          this.echarts5Data = res.data.data.data
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //平均服务用时
    getCloseProbability(date,dateType){
      this.$http.get("dashboard/close_probability",{params:{type:dateType,month_start:date?.[0],month_end:date?.[1]}}).then((res)=>{
        if(res.data.code === 0){
          this.echarts3Data = res.data.data
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
    //服务人效
    getPerson_efficiency(date,dateType){
      this.$http.get("dashboard/person_efficiency",{params:{type:dateType,month_start:date?.[0],month_end:date?.[1]}}).then((res)=>{
        if(res.data.code === 0){
          this.echarts6Data = res.data.data
        }
      }).catch(e => {
        this.$message.error(e.message);
      });
    },
  },

  components: {
    echarts1,
    echarts2,
    echarts3,
    // echarts4,
    echarts5,
    echarts6,
    // echarts7,
    DateDialog,
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  margin: 15px 15px 15px;
}

.statistics {
  width: 100%;
  height: 340px;
  display: flex;
  justify-content: space-between;

  // 指标统计
  .statistics-left {
    width: 67%;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-sizing: border-box;

    .left-title span {
      margin-left: 6px;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #101010;
    }

    .left-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .content {
        width: 30%;
        height: 120px;
        background: #005EDF;
        border-radius: 10px;
        margin: 10px 5px 5px 5px;
        cursor: pointer;


        .content-Box {
          width: calc(100% - 28px);
          height: 120px;
          background-color: #F2F3FF;
          margin-left: 10px;
          padding: 0 10px;
          overflow: hidden;
          border-radius: 0 10px 10px 0;

          h3 {
            margin: 15px 20px;
          }

          p {
            margin-left: 20px;
            font-size: 12px;
          }

          .content-img {
            display: flex;
            align-items: center;
            margin-top: 10px;
            font-size: 14px;

            img {
              margin-right: 10px;
              width: 22px;
              height: 22px;
            }
          }
        }

        .boxcolor {
          color: white;
          background-color: #72B7F5;
        }

        .boxcolor:hover {
          color: white;
          background-color: #72B7F5;
        }

      }
    }
  }

  // 待办事项
  .statistics-right {
    box-sizing: border-box;
    width: 31.5%;
    padding: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;

    .right-title span {
      margin-left: 6px;
      font-size: 14px;
      font-family: Source Han Sans SC;
      font-weight: 400;
      color: #101010;
      position: relative;
    }
    .el-dropdown{
      float: right;
    }
    .el-dropdown-link:hover{
      color: #72B7F5;
      cursor: pointer;
    }

    .right-content {
      width: 100%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      text-align: center;

      .right-content-box {
        width: 45%;
        height: 120px;
        background-color: #FFFFFF;
        box-shadow: 0px 8px 14px 2px rgba(150, 158, 164, 0.3);
        border-radius: 10px;
        margin: 10px 5px 5px 5px;
        //transition: all linear .3s;

        h2 {
          font-size: 48px;
          margin: 18px;
        }
      }

      .right-content-box:hover {

        cursor: pointer;
        background-color: #1890ff;
        box-shadow: none;
        h2, p {
          color: #FFFFFF;
        }
      }
    }
  }
}

.content-title {
  font-family: Source Han Sans SC;
  color: #101010;
  display: flex;
  justify-content: space-between;
  margin: 15px 15px 5px 15px;
  align-items: center;
  font-size: 14px;

  span {
    margin-left: 12px;
  }

  .title-text {
    display: flex;
    align-items: center;
    p{
      cursor: pointer;
      display: flex;
      align-items: center;
      user-select: none;
    }
    p:hover{
      color:#6FDB5B ;
    }

    img{
      //width: 10px;
      height: 6px;
      width: 10px;
      margin-left: 3px;
    }
    span {
      color: #6FDB5B;
      user-select: none;
      cursor: pointer;
    }
  }

}

.Chart {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .Chart-left {
    width: 67%;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 -10px;

    .left-content {
      width: calc(50% - 10px);
      height: 400px;
      background-color: #FFFFFF;
      border-radius: 10px;
    }

    .right-content {
      width: calc(50% - 10px);
      height: 400px;
      background-color: #FFFFFF;
      border-radius: 10px;
    }
  }

  >.left-content {
    width: 31.5%;
    height: 400px;
    background-color: #FFFFFF;
    border-radius: 10px;
  }
  .Chart-right {
    width: 39.5%;
    margin-left: 20px;
    display: flex;
    justify-content: space-between;


    ul {
      width: 100%;
      padding: 10px 0 0 20px;
      box-sizing: border-box;
      overflow: auto;
      height: 360px;

      li {
        height: 40px;
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;

        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
      }
    }

    .right-l {
      width: calc(50% - 10px);
      background-color: #FFFFFF;
      border-radius: 10px;
      height: 400px;
      padding-bottom: 10px;



    }

    .right-r {
      width: calc(50% - 10px);
      background-color: #FFFFFF;
      border-radius: 10px;
      height: 400px;
      padding-bottom: 10px;



    }
  }
}

.Linediagram {
  width: 100%;
  height: 348px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;


  .Linediagram-left {
    width: 67%;
    border-radius: 10px;
    background-color: #FFFFFF;
  }

  .Linediagram-right {
    width: 31.5%;
    margin-left: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
  }
}

.strip {
  width: 100%;
  height: 400px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .strip-left {
    width: 58%;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    // padding: 0 10px;

    .left-content {
      width: calc(50% - 10px);
      height: 400px;
      background-color: #FFFFFF;
      border-radius: 10px;
    }

    .right-content {
      width: calc(50% - 10px);
      height: 400px;
      background-color: #FFFFFF;
      border-radius: 10px;
    }
  }

  .strip-right {
    width: 39.5%;
    margin-left: 20px;
    background-color: #FFFFFF;
    border-radius: 10px;
  }
}
.rose{
  color: #5CC349;
  margin-left: 14px;
  position: relative;
  >span{
    margin-right: 3px;
    position: absolute;
    top: 2px;
    left: -7px;
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 3px solid #5CC349;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
      //border-top: 5px solid transparent;
  }
}
.fall{
  color: #FF0000;
  margin-left: 5px;
  >span{
    margin-right: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 3px solid #FF0000;
    border-right: 3px solid transparent;
    border-left: 3px solid transparent;
    border-bottom: 5px solid transparent;
  }
 }

</style>
